<%--
  Created by IntelliJ IDEA.
  User: qianghj
  Date: 2019/9/9
  Time: 14:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>店铺列表</title>
    <link href="${pageContext.request.contextPath}/css/dplist.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/dist/js/jquery-3.3.1.min.js" ></script>

</head>
<body>
<div class="box">
    <!-- 顶部导航-->
    <div class="header-container">
        <div class="top-nav">
            <div class="mini-logo">
                <a href="index1.html" class="item">
                    <i class="icon-logo"></i>
                    大众点评首页
                </a>
            </div>
            <div class="group quick-menu ">
                <ul class="quick-munu">
                    <li class="munu"><a href="#">写点评</a>
                    <li class="munu"><a href="images/dp_login.html">
                        <span>你好，请登陆</span>
                        <span style="color: #f63;margin-left: 12px" >免费注册</span>
                    </a></li>
                    <li class="munu munu1"><a href="#">个人中心</a>
                        <div>
                            <ul class="down-list">
                                <li><a href="#">我的点评</a></li>
                                <li><a href="#">我的收藏</a></li>
                                <li><a href="#">我的团购</a></li>
                                <li><a href="#">我的部落</a></li>
                                <li><a href="#">我的订座</a></li>
                                <li><a href="#">我的设置</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="munu munu1"><a href="#">商户服务</a>
                    <li class="munu munu1"><a href="#">帮助中心</a>
                    <li class="munu munu1"><a href="#">网站导航</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="head">
        <div class="logo">
            <a href="#" class="logo"></a>
            <span class="sub-logo">&nbsp | &nbsp 注册</span>
        </div>
        <div class="search">
            <input type="text" placeholder="搜索商户名、地址、菜单、外卖等" id="shopName"/>
            <input type="button" id="searchBtn" value="搜美食">
            <input type="button" value="搜全站">
        </div>
        <div class="navbar">
           <span class="primary-more"><span>全部美食分类</span>
               <div class="cate-list">
                   <div class="cate-list1">
                       <span>异国料理</span>
                       <a href="#">西餐</a>
                       <a href="#">日本菜</a>
                   </div>
                   <div class="cate-list1">
                       <span>中式料理</span>
                       <a href="#">火锅</a>
                       <a href="#">苏帮菜</a>
                   </div>
                   <div class="cate-list1">
                       <span>异国料理</span>
                       <a href="#">西餐</a>
                       <a href="#">日本菜</a>
                   </div>
                   <div class="cate-list1">
                       <span>异国料理</span>
                       <a href="#">西餐</a>
                       <a href="#">日本菜</a>
                   </div>


               </div>
           </span>
            <a href="#" class="cate-item1">霸王餐 <i></i></a>
            <a href="#" class="cate-item2">社区论坛</a>
        </div>
    </div>
    <div class="food-nav">
        <div class="foods-nav">
            <a href="#">苏州美食</a>>
            <a href="#">火锅</a>
            <!--    <a href="#">姑苏区</a>>
                <a href="#">观前街地区</a>>
                <span>哑巴生煎(临顿路店)</span>-->
        </div>
    </div>
    <div class="bgc">
        <div class="section">
            <div class="navigation">
                <div class="nav-category">
                    <h4>分类:</h4>
                    <a href="#" class="buxian"><span>不限</span></a>
                    <div class="nc-caontain">
                        <ul class="food-cat">
                            <li ><a href="javascript:;" >火锅</a></li>
                            <li><a href="javascript:;" >自助餐</a></li>
                            <li><a href="javascript:;" >烧烤</a></li>
                            <li><a href="javascript:;" >美食快餐</a></li>
                            <li><a href="javascript:;" >美食快餐</a></li>
                            <li><a href="javascript:;" >美食快餐</a></li>
                            <li><a href="javascript:;" >美食快餐</a></li>
                            <li><a href="javascript:;" >美食快餐</a></li>
                            <li><a href="javascript:;" >美食快餐</a></li>
                            <li><a href="javascript:;" >美食快餐</a></li>
                            <li><a href="javascript:;" >美食快餐</a></li>
                            <li><a href="javascript:;" >美食快餐</a></li>
                            <li><a href="javascript:;" >美食快餐</a></li>
                            <li><a href="javascript:;" >美食快餐</a></li>
                        </ul>
                    </div>
                    <div class="nc-address">
                        <h4>地点:</h4>
                        <a href="#" class="buxian"><span  >不限</span></a>
                        <div class="nc-region">
                            <span>热门商区</span>
                            <span>行政区</span>
                            <span>地铁线</span>
                        </div>
                        <ul>
                            <li><a href="javascript:;" >独墅湖大学城</a></li>
                            <li><a href="javascript:;" >邻里广场</a></li>
                            <li><a href="javascript:;" >平江路</a></li>
                            <li><a href="javascript:;" >工业园区</a></li>
                            <li><a href="javascript:;" >苏州中心</a></li>
                            <li><a href="javascript:;" >苏州中心</a></li>
                            <li><a href="javascript:;" >苏州中心</a></li>
                            <li><a href="javascript:;" >苏州中心</a></li>
                            <li><a href="javascript:;" >苏州中心</a></li>
                            <li><a href="javascript:;" >苏州中心</a></li>
                            <li><a href="javascript:;" >苏州中心</a></li>
                            <li><a href="javascript:;" >苏州中心</a></li>
                            <li><a href="javascript:;" >苏州中心</a></li>
                            <li><a href="javascript:;" >苏州中心</a></li>
                        </ul>
                    </div>
                </div>
                <div class="nav-tabs">
                    <span>已选的条件:</span><span class="selectedConditions"></span>
                </div>
            </div>
            <div class="box1"></div>
            <div class="shop-wrap">
                <div class="content">
                    <div class="filter-box">
                        <div>
                            <span class="sprice"></span><span class="sprice1">有团购</span>
                            <span class="sprice"></span><span class="sprice1">可团购</span>
                            <span class="sprice"></span><span class="sprice1">有外卖 </span>

                        </div>
                        <div>

                        </div>
                    </div>
                    <div class="shop-list">
                        <span class="shoptip"></span>
                        <ul class="shop-list-ul">

                            <!-- ====================================商铺列表数据渲染===========================================-->
                            <c:forEach var="shop" items="${shopList}">

                                <li>
                                    <div class="pic">
                                        <a href="${pageContext.request.contextPath}/shop/${shop.shopId}">
                                            <img src="${pageContext.request.contextPath}/${shop.mainImage}" alt=""/>
                                        </a>
                                    </div>
                                    <div class="txt">
                                        <div class="tit">
                                            <a href="${pageContext.request.contextPath}/shop/${shop.shopId}">
                                                    ${shop.shopName}(${shop.branchshopName})
                                            </a>
                                            <div class="promo-icon">
                                            </div>
                                        </div>
                                        <div class="comment">
                                            <span class="sml-rank-stars"></span>
                                           <%-- <a href="#"><span>1643</span><span>条评论</span></a>--%>
                                          <%--  <em class="sep">|</em>--%>
                                            <a href="#"><span>人均 &nbsp ￥</span>${shop.personConsume}元<span></span></a>
                                        </div>
                                        <div class="tag-addr">
                                            <a href="#">苏帮菜</a>
                                            <em class="sep">|</em>
                                            <a href="#"><span>${shop.shopAddArea}</span></a>
                                            <span class="addr">${shop.shopAddCity}${shop.shopAddArea}${shop.shopAddStreet}${shop.stopAddDetail}</span>
                                        </div>
                                        <div class="recommend">
                                            <span>标签:</span>

                                                <a href="#">${keyword} | </a>



                                        </div>
                                        <span class="comment-list">
                                        <span>口味</span><span>${shop.flavorScore}</span>
                                        <span>环境</span><span>${shop.surroundingScore}</span>
                                        <span>服务</span><span>${shop.serviceScore}</span>
                                    </span>
                                    </div>
                                </li>



                            </c:forEach>



                        </ul>
                        <!-- =======================页码渲染====================================== -->
                        <div style="width: 800px;height: 50px;margin: 0 auto" class="page-area">
                            <span class='prepage'>
                                <a href='javascript:;' style="font-size: 10px" class='proSearch'>上一页</a>
                            </span>

                            <label style="font-size: 10px">当前页码</label><span style="font-size: 10px" class='currentPage'></span>

                            <span class='nextpage'>
                                <a href='javascript:;' style="font-size: 10px" class='nextSearch'>下一页</a>
                            </span>

                            <label style="font-size: 10px">总记录数：</label><span style="font-size: 10px" class='totalrecords'></span><span>条</span>
                            <label style="font-size: 10px">总页码</label><span style="font-size: 10px" class="totalpages"></span><span>页</span>

                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>

<script>


    var shopname="";   //name=haidilao&
    var kw ="";	   //kw=shaokao&
    var area ="";	  //area=pingjianglu&
    var data ="";
    var currentpage ;

    //获得搜索框中的输入值
    $("#searchBtn").click(function () {
        shopname = "name="+ $("#shopName").val();

        search(1);
    });

    //点击美食关键字：获得到选中的值，拼接url
    $('.nc-caontain a').click(function(event){   //获得美食分类输入值

        $(this).parents("ul").children("li").children("a").removeClass('sx_check');
        $(this).addClass('sx_check');
        kw = "kw="+ $(this).text();
        selectedConditions();
        search(1);
    });

    //点击区域：获得到选中的值，拼接url
    $('.nc-address ul li a').click(function(event){ //获得地区分类输入值

        $(this).parents("ul").children("li").children("a").removeClass('sx_check');
        $(this).addClass('sx_check');
        area =  "area="+$(this).text();
        selectedConditions();
        search(1);

    });


    //遍历所有a标签，根据a标签的className不同来获取用户选中的类型
    function selectedConditions(){
        var result = ""//记录返回的条件
        for(var i=0;i<$('.sx_check').length;i++){
            result += $('.sx_check').eq(i).text() +",";
        }

        //根据当前的选择条件，发送到controller
        console.log("当前的选择条件:" + result);
        $(".selectedConditions").text(result);

        return result;
    }

    //执行搜索
    function search(page) {
        var base_url ="${pageContext.request.contextPath}/shop?";
        if (shopname != "")
            base_url += shopname;  //http://localhost:8080/shop?name=haidilao&
        if (kw != "")
            base_url += kw;  //http://localhost:8080/shop?name=haidilao&kw=shaokao&
        if (area != "")
            base_url += area;  //http://localhost:8080/shop?name=haidilao&kw=shaokao&area=pingjianglu&
        if (page != "" && page!=undefined && page!=NaN) {// 测试
            console.log("page:"+page);
            base_url += "page=" + page; //http://localhost:8080/shop?name=haidilao&kw=shaokao&area=pingjianglu&page=2

        }

        console.log("最后要请求的url:"+base_url);


        $.ajax({
            type: "GET",
            datatype: "json",
            url: base_url,
            success: function (result) {
                console.log("查询结果："+result);

                //遍历result中集合数据
                var shopList = result.list;
                if(shopList.length==0) {
                    $(".shoptip").text("暂无匹配商铺");
                    return ;
                }


                console.log("查询商铺集合："+shopList);
                var ul = $(".shop-list-ul");
                ul.append("");
                //数据渲染 商铺集合数据
                for(var i=0;i<shopList.length;i++){
                    var shop = shopList[i];


                    var ele ="<li>\n" +
                        "                                    <div class=\"pic\">\n" +
                        "                                        <a href=\"${pageContext.request.contextPath}/shop/${shop.shopId}\">\n" +
                        "                                            <img class='mainimg' src='' alt=\"\"/>\n" +
                        "                                        </a>\n" +
                        "                                    </div>\n" +
                        "                                    <div class=\"txt\">\n" +
                        "                                        <div class=\"tit\">\n" +
                        "                                            <a href=\"${pageContext.request.contextPath}/shop/${shop.shopId}\">\n" +
                        "                                                    \n" +
                        "                                            </a>\n" +
                        "                                            <div class=\"promo-icon\">\n" +
                        "                                            </div>\n" +
                        "                                        </div>\n" +
                        "                                        <div class=\"comment\">\n" +
                        "                                            <span class=\"sml-rank-stars\"></span>\n" +
                        "                                           <%-- <a href=\"#\"><span>1643</span><span>条评论</span></a>--%>\n" +
                        "                                          <%--  <em class=\"sep\">|</em>--%>\n" +
                        "                                            <a href=\"#\"><span>人均 &nbsp ￥</span>" +
                        "                                           <span class='personConsume'></span>" +
                        "                                           <span>元</span></a>\n" +
                        "                                        </div>\n" +
                        "                                        <div class=\"tag-addr\">\n" +
                        "                                            <a href=\"#\">苏帮菜</a>\n" +
                        "                                            <em class=\"sep\">|</em>\n" +
                        "                                            <a href=\"#\"><span class='area'> </span></a>\n" +
                        "                                            <span class=\"addr\"></span>\n" +
                        "                                        </div>\n" +
                        "                                        <div class=\"recommend\">\n" +
                        "                                            <span>标签:</span>\n" +
                        "\n" +
                        "                                                <a href=\"#\" class='shopkw'> </a>\n" +
                        "\n" +
                        "\n" +
                        "\n" +
                        "                                        </div>\n" +
                        "                                        <span class=\"comment-list\">\n" +
                        "                                        <span>口味</span><span class='shopfs'></span>\n" +
                        "                                        <span>环境</span><span  class='shopsurrounding'></span>\n" +
                        "                                        <span>服务</span><span  class='shopservice'></span>\n" +
                        "                                    </span>\n" +
                        "                                    </div>\n" +
                        "                                </li>";



                    ul.append(ele);
                    var li = ul.children("li").eq(i);
                    li.find(".mainimg").attr('src',"${pageContext.request.contextPath}/"+shop.mainImage);
                    console.log("shop.mainImage:"+shop.mainImage);

                    li.find(".tit a").text(shop.shopName+"("+shop.branchshopName+")");
                    console.log("shop.shopName:"+shop.shopName+"("+shop.branchshopName+")");

                    li.find(".personConsume").text(shop.personConsume);
                    console.log("shop.personConsume:"+shop.personConsume);

                    li.find(".area").text(shop.shopAddArea);
                    console.log("shop.shopAddArea:"+shop.shopAddArea);



                    li.find(".addr").text(shop.shopAddCity+shop.shopAddArea+shop.shopAddStreet+shop.stopAddDetail);
                    console.log("shop.addr:"+shop.shopAddArea);

                    li.find(".shopkw").text(shop.keyword);
                    console.log("shop.keyword:"+shop.keyword);

                    li.find(".shopfs").text(shop.flavorScore);
                    console.log("shop.flavorScore:"+shop.flavorScore);

                    li.find(".shopsurrounding").text(shop.surroundingScore);
                    console.log("shop.shopsurrounding:"+shop.surroundingScore);

                    li.find(".shopservice").text(shop.serviceScore);
                    console.log("shop.serviceScore:"+shop.serviceScore);


                }



                //渲染页码

                <!-- =======================页码渲染====================================== -->
                currentpage =result.pageNum;
               if(result.pageNum !=1) {

                   $(".prepage").show();

               }else{
                   $(".prepage").hide();
               }

                if(result.pageNum !=result.pages) {

                    $(".nextpage").show();

                }else{
                    $(".nextpage").hide();
                }

                $(".currentPage").text(result.pageNum);
                $(".totalrecords").text(result.total);
                $(".totalpages").text(result.pages);


            }
        });


    };
    search(1);

    console.log("当前页码："+currentpage );
    //上一页，下一页
   /* $(".proSearch").click(function () {
        console.log("nextpage>>>>>>>>>>>>>>>>>>>>>")});
    $(".nextSearch").click(search(currentpage+1));*/



</script>


</div>
</body>
</html>
